<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="misapplication-tap-highlight" content="no"/>
    <meta name="HandheldFriendly" content="true"/>
    <meta name="MobileOptimized" content="320"/>
    <title>注册</title>
    <#assign base=request.contextPath  />
    <link rel="stylesheet" type="text/css" href="${base}/Yang/layui/css/layui.css"/>
    <script src="${base}/js/jquery.js"></script>
    <script src="${base}/js/zhang.js"></script>
    <link rel="stylesheet" href="${base}/css/common.css" type="text/css" charset="utf-8"/>
    <style type="text/css">
        li {
            padding: 0.8em;
            border-bottom: 1px solid #eaeaea;
        }

        li:active {
            background: #f4f4f4;
        }

        .top2 p {
            color: white;
            padding: 10px;
            float: none;
        }
        .m-tab {
            position: relative;
            padding: 0.40rem 0 0;
            width: 100%;
            background: #fff;
        }

        .m-tab a {
            position: absolute;
            display: inline-block;
            width: 49%;
            font-size: 0.14rem;
            color: #2C2C2C;
            letter-spacing: 0;
            line-height: 0.38rem;
            text-align: center;
            text-decoration: none;
        }

        .m-tab a:first-child {
            top: 0;
            left: 0;
        }

        .m-tab a.m-coupons {
            top: 0;
            right: 0;
        }

        .m-tab a.active {
            color: #9AC747;
            border-bottom: 2px solid #9AC747;
        }

        .c-tab span {
            position: absolute;
            display: inline-block;
            width: 44%;
            font-size: 0.14rem;
            color: #2C2C2C;
            letter-spacing: 0;
            line-height: 0.38rem;
            text-align: center;
            text-decoration: none;
        }
        .m-division {
            height: 1px;
            background: #EBEBEB;
        }

        .m-view1 {
            background: #fff;
            height: 200px;
        }

        .m-view2 {
            background: #fff;
            height: 100%;
        }

        @media screen and (min-width: 360px) {
            html {
                font-size: 100px !important;
            }

            img {
                width: 100%;
                height: 100%;
                border-radius: 5px;
            }

            .layui-breadcrumb a:hover {
                color: #1E9FFF !important;
            }

            .layui-breadcrumb a:visited {
                color: #1E9FFF;
            }
            .layui-btn-fluid {
                width: 88.6%;
            }
            .layui-form-item .layui-input-inline {
                display: block;
                float: none;
                left: 0px;
                width: auto;
                margin: 10px 10px 10px 10px;
            }
            .layui-upload-drag {
                position: relative;
                padding:0px;
                margin-left: 13px;
                margin-bottom: 13px;
                width: 44%;
                height: 100px;
                border-radius: 5px;
                border: 1px dashed #cccccc;
                background-color: #fff;
                text-align: center;
                cursor: pointer;
                color: #999;
            }
            .layui-form-pane .layui-input {
                border-radius: 5px;
            }
            .layui-input, .layui-textarea {
                display: initial;
                width: 93%;
                padding-left: 10px;
            }
            .layui-input, .layui-select, .layui-textarea {
                height: 40px;
                background-color: none;
                border: 1px solid #CCCCCC;
            }
            .layui-form-item {
                margin-bottom: 0px;
                clear: both;
                *zoom: 1;
            }
            .layui-textarea {
                min-height: 70px;
                height: auto;
                border-radius: 5px;
                line-height: 20px;
                padding: 6px 10px;
                resize: vertical;
            }
    </style>
</head>


</head>
<body onselectstart="return false;" style="height:667;">
<div class="content">
    <img style="width: 150px;height: 150px; padding: 5px;" src="${base}/img/11-2.png"/>
    <h1>集充充电</h1>
    <div class="m-tab">
        <a href="javascript:void(0);" id="m-my-invite" class="active">企业</a>
        <a href="javascript:void(0);" id="m-my-coupons" class="m-coupons">个人</a>
        <div class="m-division"></div>
    </div>
    <div id="m-view1" class="m-view1">
        <form class="layui-form layui-form-pane" method="get" action="">

            <div class="layui-form-item" style="width: 100%">
                <div class="layui-input-inline">
                    <input style="width: 60%;float: left;margin-left: 13px" class="layui-input isPhone" lay-verify="account" placeholder="手机号/登录账号" id="ptPhone"/>
                    <button type="button" style="background-color: #9AC747;width: 30%;float: right;margin-right: 13px;border-radius: 5px;height: 39px" class="layui-btn " onclick="sendSMS($('#ptPhone').val())">获取验证码</button>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input class="layui-input" lay-verify="account"  id="code" placeholder="验证码"/>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="password" name="account" id="Pass" class="layui-input" lay-verify="password" placeholder="输入新密码"/>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="password" name="account" class="layui-input" lay-verify="twopassword"
                           placeholder="确认新密码" id="rePass"/>
                </div>
            </div>

            <div style="width: 100%;padding-bottom: 20px;">
                <button type="button" class="layui-btn layui-btn-fluid" onclick="subPT()"
                        style="background-color: #9AC747;border-radius: 5px;">立即提交
                </button>


                <button type="button" class="layui-btn layui-btn-fluid" onclick="back1()"
                        style="background-color: #9AC747;border-radius: 5px;">返回登录
                </button>
            </div>
        </form>
    </div>
    <div id="m-view2" class="m-view2" style="display: none;">
        <form class="layui-form layui-form-pane" method="get" action="">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input style="width: 60%;float: left;margin-left: 13px;" class="layui-input isPhone" lay-verify="account" placeholder="手机号/登录账号" id="peoplePhone"/>
                    <button type="button" style="background-color: #9AC747;width: 30%;float: right;margin-right: 13px;border-radius: 5px;height: 39px" class="layui-btn" onclick="sendSMS($('#peoplePhone').val())">获取验证码</button>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input class="layui-input" lay-verify="account"  id="code2" placeholder="验证码"/>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="password" name="account" class="layui-input" id="peoplePass"  lay-verify="password" placeholder="输入新密码"/>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="password" id="repeoplePass" name="account" class="layui-input" lay-verify="twopassword"
                           placeholder="再次输入新密码"/>
                </div>
            </div>

            <div style="width: 100%;padding-bottom: 20px;">
                <button type="button" class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="sub" onclick="subPeople()"  style="background-color: #9AC747;border-radius: 5px;">立即提交
                </button>


                <button type="button" class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="sub" onclick="back2()"  style="background-color: #9AC747;border-radius: 5px;">返回登录
                </button>
            </div>
        </form>
    </div>

</div>
<script type="text/javascript">
    $('#m-return').on('click', function () {
        window.history.back()
    });
    var myCoupons = $('#m-my-coupons');
    var myInvite = $('#m-my-invite');
    var view1 = $('#m-view1');
    var view2 = $('#m-view2');
    $('#m-return').on('click', function () {
        window.history.back()
    });
    myInvite.on('click', function () {
        myInvite.addClass('active');
        myCoupons.removeClass('active');
        view1.show();
        view2.hide();
    });
    myCoupons.on('click', function () {
        myInvite.removeClass('active');
        myCoupons.addClass('active');
        view1.hide();
        view2.show();
    });
</script>
<script src="${base}/Yang/layui/layui.all.js" charset="utf-8"></script>
<script>
function back1() {
    window.location.href="${base}/weUser/login.html"
}
function back2() {
    window.location.href="${base}/weUser/login.html"
}

    function sendSMS(phone) {
        if(!/^1[34578]\d{9}$/.test(phone)){
            layer.msg("请输入正确手机号");
            return;
        }
        $.ajax({
            type : "POST", //提交方式
            url : "${base}/weUser/SendSMS",//路径
            data :{phone:phone},
            success : function(data) {//返回数据根据结果进行相应的处理
                layer.msg(data)
            }
        });
    }


    function subPT() {

        if($("#rePass").val()!=$("#Pass").val()){
            layer.msg("两次密码不匹配")
            return;
        }
        var requestJson={};
        requestJson.callPhone=$("#ptPhone").val();
        requestJson.passWord=$("#rePass").val();
        $.ajax({
            type : "POST", //提交方式
            url : "${base}/weUser/updatePt",//路径
            data :{param:JSON.stringify(requestJson),code:$("#code").val()},
            success : function(data) {//返回数据根据结果进行相应的处理
               if (data=="修改成功") {
                    layer.msg(data)
                   window.location.href="${base}/weUser/login.html"
                }
                else  {
                    layer.msg(data)
                }

            }
        });
    }


    function subPeople() {
        if($("#repeoplePass").val()!=$("#peoplePass").val()){
            layer.msg("两次密码不匹配")
            return;
        }
        var requestJson={};
        requestJson.phone=$("#peoplePhone").val();
        requestJson.passWord=$("#peoplePass").val();
        $.ajax({
            type : "POST", //提交方式
            url : "${base}/weUser/updatePeople",//路径
            data :{param:JSON.stringify(requestJson),code:$("#code2").val()},
            success : function(data) {//返回数据根据结果进行相应的处理
                if (data=="修改成功") {
                    layer.msg(data)
                    window.location.href="${base}/weUser/login.html"
                }
                else  {
                    layer.msg(data)
                }

            }
        });
    }
</script>
</body>
</html>